<template>
	<div class='container'>
		<h4>自定义指令</h4>
		<input v-focus type="text" placeholder="自动聚焦">
		<br>
		<br>
		<button v-btn-permission="'admin'">按钮权限（admin）</button>
		<button v-btn-permission="'zhangsan'">按钮权限（zhangsan）</button>
		<div v-color="'red'">自定义指令</div>
		<div v-ellipsis class="box">蛇口街道肯定是副科级飞机快三大</div>
	</div>
</template>

<script setup>
import { vBtnPermission, fontColor as vColor } from './directive'
const vFocus = {
	mounted: (el) => {
		el.focus()
		// 在元素上做些操作
	}
}
</script>
<style lang='less' scoped>
.container {
	.box {
		width: 100px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	button {
		margin-right: 10px;
	}
}
</style>
